<template>
    <div class="main">
        <el-row :gutter="20">
            <!-- 注册用户 -->
            <el-col :md="24" :lg="6">
                <div class="box el-box-init el-bkgd-white">
                    <p>注册总数</p>
                    <div>
                        <img src="@/assets/image/tab-icon-1.png" alt="" />
                        <span>{{ tab.totalUser }}</span>
                    </div>
                </div>
            </el-col>
            <!-- 文章总数 -->
            <el-col :md="24" :lg="6">
                <div class="box el-box-init el-bkgd-white">
                    <p>文章总数</p>
                    <div>
                        <img src="@/assets/image/tab-icon-2.png" alt="" />
                        <span>{{ tab.totalArticle }}</span>
                    </div>
                </div>
            </el-col>
            <!-- 已发布文章 -->
            <el-col :md="24" :lg="6">
                <div class="box el-box-init el-bkgd-white">
                    <p>已发布文章</p>
                    <div>
                        <img src="@/assets/image/tab-icon-3.png" alt="" />
                        <span>{{ tab.totalRelease }}</span>
                    </div>
                </div>
            </el-col>
            <!-- 阅读总数 -->
            <el-col :md="24" :lg="6">
                <div class="box el-box-init el-bkgd-white">
                    <p>阅读总数</p>
                    <div>
                        <img src="@/assets/image/tab-icon-4.png" alt="" />
                        <span>{{ tab.totalReading }}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="chart-box">
            <div id="chart"></div>
        </div>
    </div>
</template>

<script>
import { defineComponent, getCurrentInstance, ref, reactive, toRefs } from 'vue';
import { adminHome as Api } from 'api';
import * as echarts from 'echarts';

export default defineComponent({
    setup() {
        const { proxy } = getCurrentInstance();
        let count = ref(7);
        let sys = reactive({
            tab: {
                totalUser: 1, // 用户总数
                totalArticle: 2, // 文章总数
                totalRelease: 3, // 发布总数
                totalReading: 4 // 阅读总数
            },
            days: [],
            talkData: [],
            commentData: []
        });

        // 请求页面列表
        const getList = async () => {
            const { code, msg, data } = await proxy.$http.get(Api.getList, { params: { count } });

            if (code == 200) {
                sys.tab.totalUser = data.sys.tab.totalUser;
                sys.tab.totalArticle = data.sys.tab.totalArticle;
                sys.tab.totalRelease = data.sys.tab.totalRelease;
                sys.tab.totalReading = data.sys.tab.totalReading;
                drawChart(data);
            }
        };
        // 绘制图表
        const drawChart = (data) => {
            let chartDom = document.getElementById('chart');
            let myChart = echarts.init(chartDom, 'dark');
            let option;

            option = {
                title: {
                    text: `近${count.value}日博客信息`
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['发布文章', '留言', '评论']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    data: data.sys.days
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '发布文章',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        data: data.sys.pushArticleData
                    },
                    {
                        name: '留言',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        data: data.sys.talkData
                    },
                    {
                        name: '评论',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        data: data.sys.commentData
                    }
                ]
            };

            option && myChart.setOption(option);

            window.onresize = function () {
                myChart.resize();
            };
        };

        getList();

        return {
            count,
            ...toRefs(sys)
        };
    }
});
</script>

<style lang="less" scoped>
.box {
    p {
        color: #606266;
        border-bottom: 1px solid #ebeef5;
        padding: 10px;
        margin-bottom: 10px;
    }
    div {
        display: flex;
        align-items: center;
        padding: 0 10px 10px 10px;
        img {
            width: 50px;
        }
        span {
            font-size: 36px;
            margin-left: 10px;
            color: #606266;
        }
    }
}
.chart-box {
    width: 100%;
    margin: 10% auto;
    #chart {
        height: 500px;
    }
}
</style>
